<template>
  <div class="min-h serveProject bg-wt">

    <!-- 搜索框 -->
    <SearchForm :searchData="pagination" @handleClear="handleClear" @handleReset="handleReset"
      @handleSearch="handleSearch"></SearchForm>

    <TableList 
    :data="data" 
    :total="total" 
    :pagination="pagination" 
    @onPageChange="onPageChange"  
    @handleBulid="handleBulid"
    @handleEdit="handleEdit"
    @handle-click-delete="handleClickDelete"
    @handle-forbidden="handleForbidden"
    >
    </TableList>

    <DialogForm
      ref="formRef"
      :visible="visible"
      :title="title"
      :data="formBaseData"
      @handleClose="handleClose"
      @handle-add = "handleAdd"
      @handleEdit="handleEditForm"
    >
    </DialogForm>

     <!-- 删除弹层 -->
     <Delete
    :visible="dialogDeleteVisible"
    :delete-text="operateText"
    @handle-delete="handleDelete"
    @handle-close="handleDeleteClose"
    ></Delete>
    <!-- end -->
    <!-- 禁用弹层 -->
    <Forbidden
    :visible="dialogVisible"
    :text="operateText"
    @handle-submit="handleForbiddenSub"
    @handle-close="handleForbiddenClose"
    ></Forbidden>

  </div>
</template>

<!-- <script setup lang="jsx"> -->
<script lang="jsx" setup>

import SearchForm from "./components/SearchForm.vue";
import TableList  from './components/TableList.vue'
import { ref, onMounted } from 'vue';
import { getProjectList,projectAdd ,getProjectDetails,projectUpdate,projectStatus,projectDelete } from '@/api/serve'
import { MessagePlugin} from 'tdesign-vue-next'



const data = ref([])
const total = ref(0)
const pagination = ref({
  pageSize: 10,
  pageNum: 1,
  total,
});

//生命周期
onMounted(() => {
  getList()
})

//获取列表数据
const getList = async () => {
  const res = await getProjectList(pagination.value)
  data.value = res.data.records
  total.value = Number(res.data.total)
}

// 翻页设置当前页
// const onPageChange = (val) => {
//   pagination.value.pageNum = val.current
//   pagination.value.pageSize = val.pageSize
//   getList()
// }


//重置搜索框
const handleReset = () => {
  //重置页码
  pagination.value = {
    pageNum: 1,
    pageSize: 10
  }
  getList()
}

//搜索
const handleSearch = () => {
  //点击了搜索按钮之后，就需要重置页码
  pagination.value.pageNum = 1
  getList()
}

//清空
const handleClear = (val) => {
  if(val === 'name'){
    delete pagination.value.name
  }else{
    delete pagination.value.status
  }
  getList()
}

import DialogForm from './components/DialogForm.vue'
//是否显示弹窗
var visible = ref(false)
const formRef = ref(null)
const title = ref('') // 弹窗标题


//点击新增护理项目 按钮 把visible设置为true，弹出
const handleBulid = () =>{
  title.value = '新增'
  visible.value = true;
}
//点击弹窗中的关闭或取消，关闭弹窗
const handleClose = () =>{
  visible.value = false;
  console.log("子组件点击了关闭")
}

// 添加
const handleAdd = async (val) => {
  const res = await projectAdd(val)
  if (res.code === 200) {
    MessagePlugin.success('添加成功')
    getList()
    handleClose()
    formRef.value.handleClear()
  } else {
    MessagePlugin.error(res.msg)
  }
}

// 编辑信息，回显
const formBaseData = ref({}) // 弹窗表单内容
//编辑
const handleEdit = (val) =>{
  // 将弹窗的标题
  title.value = '编辑'
  // 获取详情
  getDetails(val.id)
  // 显示弹窗
  visible.value = true
  console.log("子组件点击了编辑")
}
// 获取详情数据
const getDetails = async (id) => {
  const res = await getProjectDetails(id) // 获取列表数据
  if (res.code === 200) {
    formBaseData.value = res.data
  }
}


// 修改数据
const handleEditForm = async (val) => {
  const res = await projectUpdate(val)
  if (res.code === 200) {
    MessagePlugin.success('编辑成功')
    getList()
    handleClose()
    formRef.value.handleClear()
  } else {
    MessagePlugin.error(res.msg)
  }
}

// 删除弹层
import Delete from '@/components/OperateDialog/index.vue'
// 禁用弹窗
import Forbidden from '@/components/Forbidden/index.vue'

const dialogDeleteVisible = ref(false) // 控制删除弹层显示隐藏
const dialogVisible = ref(false) // 禁用弹窗
const typeId = ref('') // 设置删除id
const typeStatus = ref(null) // 禁用启用
const operateText = ref('护理项目') // 要操作的内容提示
const statusText = ref('') // 启用禁用提示
// 点击删除
const handleClickDelete = (val) => {
  typeId.value = val.id
  dialogDeleteVisible.value = true
}
// 禁用弹窗
const handleForbidden = (val) => {
  
  typeId.value = val.id
  if (val.status === 1) {
    dialogVisible.value = true
    typeStatus.value = 0
    statusText.value = '禁用成功'
  } else {
    typeStatus.value = 1
    handleForbiddenSub()
    statusText.value = '启用成功'
  }
}

// 关闭删除弹层
const handleDeleteClose = () => {
  dialogDeleteVisible.value = false
}
// 关闭禁用弹窗
const handleForbiddenClose = () => {
  dialogVisible.value = false
}

// 确定禁用
const handleForbiddenSub = async () => {
  const params = {
    id: typeId.value,
    status: typeStatus.value
  }
  const res = await projectStatus(params)
  if (res.code === 200) {
    dialogVisible.value = false
    MessagePlugin.success(statusText.value)
    getList()
  }
}

// 确认删除
const handleDelete = async () => {
  const res = await projectDelete(typeId.value)
  if (res.code === 200) {
    dialogDeleteVisible.value = false
    MessagePlugin.success('删除成功')
    getList()
  }
}


</script>